/* eslint-disable vue/valid-v-bind */
<template>
  <!-- //   先介绍一下背景
//   首先头顶上有一个保存按钮,用来上传图片的
//   下面是内容 , 有一个input框,type=file.. 有一个button, 用来代替input去选择文件
//   我的后台是要从请求的api里拿到上传的url地址,再通过头顶的保存按钮上传,之后返回一个图片的url地址,动态绑定到页面的img标签上显示出来
//   参考了网上一些写法, 我这里只为了实现功能, 不做其它处理

// 样式就不写了, 最后贴张图 -->
  <div class="main">
    <!-- 保存可以参考这个方法 -->
    <!-- <div @click="onUpload">保存</div> -->
    <!-- //顶部上传按钮 -->
    <button type="button" class="xunzeimage" @click="onPickFile"> 点击上传</button>
    {{ name }}
    <!-- //把下面input隐藏,代替它选择文件 -->

    <input ref="fileInput" type="file" accept="image/*" style="display: none" @change="getFile" />
    <!-- //选择文件 -->

    <!-- <img :src="imageUrl" /> -->
    <!-- //绑定文件地址 -->
  </div>
</template>

<script>
// import axios from "axios"; //获取上传的链接
export default {
  // name: "whatever",
  data() {
    return {
      imageUrl: "", // img绑定的src地址
      postUrl: "", // 需要上传到的地址
      name: ""
    };
  },
  mounted() {
    // 第一步:先请求一下api,看看需要上传到哪里去,存到postUrl里面 ( 做了跨域配置,所以直接写成了api )
    // axios.get("api/getUploadInfo?type=image").then(res => {
    //   if (res.status === 200 && res.data) {
    //     let data = res.data.data;
    //     let postUrl = data.url;
    //     console.log(postUrl); //页面挂载后,先打印一下,拿到了需要上传到的url地址   ( 第一次有效打印 )
    //     this.postUrl = postUrl; //把地址保存下来
    //   }
    // });
  },
  methods: {
    // 第二步:再来写个方法, button代替input选择图片
    onPickFile() {
      this.$refs.fileInput.click();
    },
    // 第三步: 文件选择后, 后在页面上显示出来    转base64位的操作
    getFile(event) {
      const files = event.target.files;
      let filename = files[files.length - 1].name; // 只有一个文件
      this.name = filename
      this.$emit('imagename', filename)
      if (filename.lastIndexOf(".") <= 0) {
        return alert("请添加一张图片!"); // 判断图片是否有效
      }
      const fileReader = new FileReader(); // 内置方法new FileReader()   读取文件
      // fileReader.readAsDataURL(files[files.length - 1]);
      fileReader.readAsBinaryString(files[files.length - 1]);
      fileReader.addEventListener("load", () => {
        this.imageUrl = window.btoa(fileReader.result.toString());
        // this.imageUrl = fileReader.result;
        this.$emit('child-event', this.imageUrl)
        // console.log(this.imageUrl)
      });
      // fileReader.readAsBinaryString(files[files.length - 1]);
      // fileReader.onload = function(f) {
      //   this.imageUrl = fileReader.result;
      // }
      // this.image = files[files.length - 1];
      // 到这里后, 选择图片就可以显示出来了
      // console.log(this.image)
      // 子组件向父组件传值
    }
    // 第四步: 上传文件了
    // onUpload(event) {
    //   event.preventDefault();
    //   let fd = new FormData(); //内置方法new FormData()  新建一个表格
    //   fd.append("file", this.image); //把image添加进去
    //   console.log(this.image); //(       第二次有效打印           )
    //   axios
    //     .post(this.postUrl, fd)
    //     .then(res => {
    //       //第一个参:this.postUrl就是上面保存好的要上传的地址
    //       console.log(res); //(      第三次有效打印    )
    //       if (res.status === 200 && res.data) {
    //         let data = res.data.data;
    //         let imageUrl = data.url; //上传成功 , 后台返回了一个图片地址
    //         this.imageUrl = imageUrl;
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // }
  }
};
</script>
<style scoped>
.xunzeimage {
  border: 1px solid #6ecae3;
  width: 200px;
  background-color: transparent;
  line-height: 40px;
  border-radius: 4px;
  color: rgb(161, 154, 154);
  font-weight: 600;
  /* height: 40px; */
  /* margin-left: -10px; */
}
</style>
